<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>卡片布局案例1</title>
		<style>
			/* css样式器
			 1.通配选择器：微醺雅黑 #f5f5f5 浅灰 外边距至0
			 2.#product_card:边框 内边距 外边距 阴影【透明.1】文字居中
			 3.img 边框倒角 内外边距【微调】
			 4.h3 颜色 内外边距？【微调】
			 5.p 字体大小 颜色
			 6.p+span：span 内外边距【微调】颜色
			  */
			 *{
				 font-family: "微醺雅黑";
				 color: #f5f5f5;
				 background-color: lightgray;
				 border: 1px solid;
			 }
			 #product_card{
				 border: 1px solid;
				 padding:10px;
				 margin: 10px;
				 box-shadow: 0 0 5px rgba(0,0,0.3);
			 }
			 img{
				 border-radius: 10px;
				 padding: 10px 15px;
				 margin: 15px 30px;
			 }
			 h3{
				 color: black;
				 padding: 5px;
				 margin: 5px;
			 }
			 p{
				 font-size: 14px;
				 color:red;
			 }
			 span{
				 color: #f5f5f5;
			 }
			 p+span{
				padding: 2px;
				margin: 2px;
				
			}
			
			}
			#id{
				background: 1px solid #f5f5f5;
				border-bottom: 0px;
			}
		</style>
	</head>
	<body>
		<!-- 网页：1.html 结构【原生图分析】 -->
		<div id="product_card">
			<img src="img/8ec949d463ac44ef47049cae0cfceab.jpg" width="260px" alt="汽车">
			<h3>小米SU7</h3>
			<p>￥279999.00</p>
			<p>已有<span>10万+</span>评价</p>
		</div>
	</body>
</html>